<template>
	<view>
		<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" @change="bindMultiChange" @cancel="bindMultiCancel" :value="multiIndex" :range="multiArray">
			<view class="uni-input">
				<!-- <text v-if="kxTimeValue.value">{{kxTimeValue.value}}</text> -->
				<text class="default">+新增时段</text>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: "kx-time-picker",
		data() {
			//根据传输时间段判断展示内容
			let [multiIndex, mIndex] = this.multiFunt();
			return {
				multiIndex: multiIndex, //当前区间选中值
				mIndex: mIndex, //选择范围区间
			};
		},
		//接受参数
		props: ['kxTimeValue','timeData'],
		computed: {
			//选择时间段
			multiArray() {
				let multiArray = [];
				let startArray = this.hourArray(this.mIndex[0]);
				let endArray = this.hourArray(this.mIndex[1]);
				multiArray = [startArray, endArray];
				console.log(multiArray)
				return multiArray
			},
			//展示时间段
			startTime() {
				return this.multiArray[0][this.multiIndex[0]]
			},
			endTime() {
				return this.multiArray[1][this.multiIndex[1]]
			},
			showTime() {
				return this.startTime + '-' + this.endTime
			},
		},
		methods: {
			//数据整理
			multiFunt() {
				let multiIndex = [0, 0],
					mIndex = [0, 1]
				if (this.kxTimeValue.value) {
					let multiA = this.kxTimeValue.value.split('--');
					multiA = multiA.map((v) => {
						return Number(v.split(':')[0])
					});
					multiIndex[0] = multiA[0];
					mIndex[1] = multiIndex[0] + 1;
					multiIndex[1] = multiA[1] - mIndex[1];
				}
				return [multiIndex, mIndex]
			},
			//时间段数组
			hourArray(start = 0, end = 24) {
				let array = [];
				if (start == 0) {
					end = 23
				}
				for (let i = start; i <= end; i++) {
					array.push(i + ':00')
				}
				return array
			},
			//修改列
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.mIndex[1] = e.detail.value + 1
						if (this.multiIndex[1]) this.multiIndex[1]--;
						break
				}
				this.mIndex.splice(0, 0)
			},
			//点击确定
			bindMultiChange(e) {
				var dataVal=this.timeData.val;
				var data1={}
				data1[dataVal]=[{time_id:"自定义",time_title:"自定义",time:[{time:this.showTime}]}]
				this.$emit('kxTimeFunt', data1)
				
			},
			//点击取消
			bindMultiCancel() {
				let [multiIndex, mIndex] = this.multiFunt();
				this.multiIndex = multiIndex;
				this.mIndex = mIndex;
			}
		}
	}
</script>

<style scoped>
	.default {
		color: #8f8f94;
	}

	.uni-input {
		
	}
</style>